@import './base.css';

/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
  transition: all 0.5s;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

/* 滑块hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}  

:root {
  /* 响应式布局需要的变量 */
  --side-bar-display: block;
  --class-content-padding-left: 14rem;
  --userID-display: block;
  --LOGO-display: block;
  --home-content-container-width: 64rem;
  --search-resource-cards-content-container-width: 46rem;
  --class-content-container-width: 78rem;
  --search-input-width: 12rem;
  --search-bar-width: 15rem;
  --rank-table-width: 50rem;
  --nav-upload-display: inline-flex;
  --nav-other-display: flex;

  /* 主题色，可自行添加 */
  --color-main: rgb(1, 132, 127);
  --color-main-darker: rgb(0, 92, 92);
  --color-main-darkest: rgb(0, 70, 70);
  --color-main-lighter: rgb(3, 182, 182);
  
  /* 强制修改element主题色 */
  --el-color-primary: rgb(1, 132, 127) !important;
}

@media screen and (max-width: 82rem) {
  :root {
    --class-content-container-width: 62rem;
  }
}

@media screen and (max-width: 70rem) {
  :root {
    --home-content-container-width: 48rem;
  }
}

@media screen and (max-width: 68rem) {
  :root {
    --class-content-padding-left: 3rem;
    --class-content-container-width: 51rem;
    --userID-display: none;
    --LOGO-display: none;
  }
}

@media screen and (max-width: 56rem) {
  :root {
    --search-input-width: 6rem;
    --search-bar-width: 9rem;
  }
}

@media screen and (max-width: 51rem) {
  :root {
    --class-content-container-width: auto;
    --home-content-container-width: 32rem;
    --search-resource-cards-content-container-width: 30rem;
    --search-content-container-width: 32rem;
    --rank-table-width: 36rem;
  }
}

@media screen and (max-width: 46rem) {
  :root {
    --nav-upload-display: none;
  }
}
